<template>
    <div id="electricSearch">
        <page-header title="历史查询" />
        <page-main style="height: calc(100% - 62px);">
            <el-form
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                class="demo-form-inline"
            >
                <el-form-item label="站点ID">
                    <el-input v-model="searchForm.siteid" />
                </el-form-item>
                <el-form-item label="站点名称">
                    <el-input v-model="searchForm.sitename" />
                </el-form-item>
                <el-form-item label="持续时间">
                    <el-input v-model="searchForm.duration" />
                </el-form-item>
                <el-form-item label="时间区间">
                    <el-col :span="11">
                        <el-form-item prop="starttime__gte">
                            <el-date-picker
                                v-model="searchForm.starttime__gte"
                                type="datetime"
                                placeholder="开始时间"
                                :picker-options="pickerOptions1"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="starttime__lte">
                            <el-date-picker
                                v-model="searchForm.starttime__lte"
                                type="datetime"
                                placeholder="结束时间"
                                :picker-options="pickerOptions2"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('searchForm')">
                        查询
                    </el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                    <!-- <download-excel
                        v-if="exportShow"
                        class="export-excel-wrapper inline-block"
                        :data="searchList"
                        :fields="json_fields"
                        :header="title"
                        name="发电记录.xls"
                    >
                        <el-button type="success" @click="exportAllData">
                            导出
                        </el-button>
                    </download-excel> -->
                    <el-button type="success" @click="exportAllData">
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
                v-loading="loading"
                :data="searchList"
                style="overflow-y: auto; height: calc(100% - 180px);"
            >
                <el-table-column prop="id" label="记录ID" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.id }}
                    </template>
                </el-table-column>
                <el-table-column prop="siteid" label="站点ID" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.siteid }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sitename"
                    :show-overflow-tooltip="true"
                    label="机房名称"
                    min-width="120"
                >
                    <template slot-scope="scope">
                        {{ scope.row.sitename }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="duration"
                    :show-overflow-tooltip="true"
                    label="发电时长"
                    min-width="90"
                >
                    <template slot-scope="scope">
                        {{ scope.row.duration }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="starttime"
                    label="发生时间"
                    min-width="110"
                >
                    <template slot-scope="scope">
                        <span>{{
                            $PublicVariable.parseDateFull(
                                scope.row.starttime,
                                0
                            )
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="endtime"
                    label="结束时间"
                    min-width="110"
                >
                    <template slot-scope="scope">
                        <span>{{
                            $PublicVariable.parseDateFull(scope.row.endtime, 0)
                        }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    :current-page="pagination.currentPage"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="width: fit-content;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </page-main>
    </div>
</template>
<script>
import LAY_EXCEL from "lay-excel";
export default {
    data() {
        return {
            pickerOptions1: {
                disabledDate: time => {
                    if (this.searchForm.starttime__lte)
                        return (
                            time.getTime() >
                            new Date(this.searchForm.starttime__lte).getTime()
                        );
                    else return time.getTime() > Date.now();
                }
            },
            pickerOptions2: {
                disabledDate: time => {
                    if (this.searchForm.starttime__gte)
                        return (
                            time.getTime() <
                                new Date(
                                    this.searchForm.starttime__gte
                                ).getTime() || time.getTime() > Date.now()
                        );
                    else return time.getTime() > Date.now();
                }
            },
            alarminfo: {},
            total: 0,
            searchForm: {
                starttime__gte: "",
                starttime__lte: "",
                siteid: "",
                sitename: "",
                duration: ""
            },
            exportShow: false,
            searchList: [],
            title: "发电记录清单",
            json_fields: {
                站点id: "siteid",
                站点名称: "sitename",
                "发电时长(分钟)": "duration",
                发电开始时间: "starttime",
                发电结束时间: "endtime"
            },
            loading: false,
            pagination: {
                currentPage: 1,
                pageSize: 20
            }
        };
    },
    created() {
        this.getData();
    },
    methods: {
        submitForm(formName) {
            console.log(this.value2);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.getData();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        getData() {
            this.loading = true;
            this.$api
                .get("/electricApi/dataelectric/", {
                    params: {
                        token: this.$store.state.user.token,
                        siteid: this.searchForm.siteid,
                        sitename: this.searchForm.sitename,
                        duration: this.searchForm.duration,
                        starttime__gte: this.$PublicVariable.parseDateFull(
                            this.searchForm.starttime__gte,
                            0
                        ),
                        starttime__lte: this.$PublicVariable.parseDateFull(
                            this.searchForm.starttime__lte,
                            0
                        ),
                        page: this.pagination.currentPage,
                        page_size: this.pagination.pageSize
                    }
                })
                .then(res => {
                    this.searchList = res.results;
                    this.total = res.count;
                    this.loading = false;
                    // if (this.total != 0) {
                    //     this.exportShow = true;
                    // } else {
                    //     this.exportShow = false;
                    // }
                });
        },
        reset() {
            this.searchForm = {
                starttime__gte: "",
                starttime__lte: "",
                siteid: "",
                sitename: "",
                duration: ""
            };
            this.pagination = {
                currentPage: 1,
                pageSize: 20
            };
            this.getData();
        },
        exportAllData() {
            // this.exportShow = false;
            this.loading = true;
            let _this = this;
            this.$api
                .get("/electricApi/dataelectric/", {
                    params: {
                        token: _this.$store.state.user.token,
                        siteid: _this.searchForm.siteid,
                        sitename: _this.searchForm.sitename,
                        duration: _this.searchForm.duration,
                        starttime__gte: _this.$PublicVariable.parseDateFull(
                            _this.searchForm.starttime__gte,
                            0
                        ),
                        starttime__lte: _this.$PublicVariable.parseDateFull(
                            _this.searchForm.starttime__lte,
                            0
                        ),
                        page: 1,
                        page_size: 999999
                    }
                })
                .then(res => {
                    _this.loading = false;
                    _this.pagination.pageSize = 999999;
                    // _this.searchList = res.results;
                    // _this.total = res.count;
                    // if (_this.total != 0) {
                    //     // eslint-disable-next-line no-debugger
                    //     // debugger;
                    //     _this.exportShow = true;
                    // } else {
                    //     _this.exportShow = false;
                    // }
                    const data = [...res.results];
                    data.unshift({
                        id: "记录ID",
                        siteid: "站点ID",
                        sitename: "机房名称",
                        duration: "发电时长",
                        starttime: "发生时间",
                        endtime: "结束时间"
                    });
                    var colConf = LAY_EXCEL.makeColConfig(
                        {
                            C: 200,
                            E: 180,
                            F: 180
                        },
                        120
                    );
                    // 执行导出函数，系统会弹出弹框
                    LAY_EXCEL.exportExcel(
                        {
                            sheet1: data
                        },
                        "历史查询记录.xlsx",
                        "xlsx",
                        {
                            extend: {
                                "!cols": colConf
                            }
                        }
                    );
                    this.$message.success("导出成功");
                });
        },
        handleSizeChange(e) {
            this.pagination.pageSize = e;
            this.getData();
        },
        handleCurrentChange(e) {
            this.pagination.currentPage = e;
            this.getData();
        }
    }
};
</script>
<style>
#electricSearch {
    height: 85vh;
}
#electricSearch .el-button {
    margin-left: 10px;
}
.download-excel {
    float: right;
    margin-left: 10px;
}
.inline-block {
    display: inline-block;
}
.pagination-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
